<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HopeWall</title>
	<style>
	body{
		margin: 0;
		padding: 0;
		width: auto;
		background: url(images/bg_main.jpg);
	}
	.paper{
		display: inline-block;
		position: absolute;
		margin: 0;
		padding: 0;
		font-size: 12px;
		/*border: 1px solid red;*/
	}
	.paper .head{
		min-width: 227px;
		min-height: 23px;
		padding-top: 45px;
		padding-left: 7px;
		background: url(images/tip1_h.gif) no-repeat left top;
		cursor: move;
	}
	.paper .body{
		background: url(images/tip1_c.gif) repeat-y;
		min-height: 40px;
		width: 100%;
		padding-left: 12px;
    	padding-right: 15px;
	}
	.paper .foot{
		background: url(images/tip1_f.gif) no-repeat left top;
		width: 227px;
		height: 53px;
		padding-top: 20px;
	}
	.paper .foot .icon{
		display: inline-block;
		padding-left: 15px;
	}
	.paper .foot .name{
		display: inline-block;
		float: right;
		padding-right: 20px;
		font-size: 14px;
		line-height: 35px;
		color: #c0f;
	}
	.wishes{
		margin: 0 auto;
		width: 70%;
		height: 700px;
		box-sizing:border-box;
		background-color: rgba(200,255,255,0.5)!important;
		background-color: #bdffff;
	}
	.clr{
		clear: both;
	}
	.head{
		background: url(images/nav_4.png);
		background-size: cover;
		min-height: 100px;
	}
	.nav{
		box-sizing: border-box;
		text-align: center;
		font-size: 25px;
		line-height: 25px;
		margin: 0 auto 10px auto;
		width: 70%;
		padding: 0;
		background: rgba(10,190,50,0.5);
	}
	.nav .item{
		display: inline-block;
		padding: 10px 20px;
		color: #fff;
	}
	.nav .item.current{
		border-radius: 15% 15% 0 0;
		background: linear-gradient(#f77825,#ffc88c);
	}
	.wish{
		display: none;
		position: absolute;
		top: 0;
		left: 0;
	    width: 904px;
	    padding-top: 20px;
	    font-size: 12px;
	}
	.wish .close{
		position: absolute;
		color: red;
		line-height: 25px;
		font-size: 25px;
		right: 0;
		margin: 0;
		padding: 0;
	}
	.wish .content {
	    min-height: 100px;
	    padding: 20px;
	    padding-top: 30px;
	    padding-bottom: 30px;
	    width: 860px;
	    max-height: 560px;
	    background-color: #F0FAFF;
	    border: 2px solid #C9F;
	}
	.wish .content .bar {
	    width: 860px;
	    height: 30px;
	    background: #C9F;
	    border-radius: 15px;
	    line-height: 30px;
	    font-size: 15px;
	    font-weight: bold;
	    color: #000;
	    text-align: center;
	}
	.wish .content .con1 .con_left_edit {
	    float: left;
	    width: 540px;
	    padding-top: 10px;
	    text-align: left;
	}
	.wish .content .con1 .con_left_edit .bg {
	    text-align: left;
	    height: 35px;
	    padding-top: 10px;
	    overflow: hidden;
	}
	.wish .content .con1 .con_left_edit .signs {
	    text-align: left;
	    padding-top: 20px;
	    padding-bottom: 0px;
	    height: 92px;
	    overflow: hidden;
	}
	.wish .content .con1 .con_left_edit .signs .tl {
	    float: left;
	    width: 120px;
	    height: 36px;
	    line-height: 36px;
	}
	.wish .content .con1 .con_left_edit .tl2 {
	    width: 500px;
	    line-height: 30px;
	    padding-top: 20px;
	}
	.wish .content .con1 .con_left_edit .tip_con_edit {
	    width: 500px;
	    padding-top: 3px;
	}
	.wish .content .con1 .con_left_edit .tip_signname_edit {
	    width: 500px;
	    padding-top: 20px;
	}
	.wish .content .con1 .con_left_edit .code {
	    width: 500px;
	    padding-top: 20px;
	}
	.wish .content .con1 .con_left_edit .submitwish {
	    width: 500px;
	    padding-top: 20px;
	    text-align: center;
	}
	.wish .content .con1 .con_left_edit .bg .tl {
	    float: left;
	    width: 120px;
	    height: 35px;
	    line-height: 35px;
	}
	.wish .content .con1 .con_left_edit .bg .bg_imgs {
	    float: left;
	    width: 360px;
	}
	wish .content .con1 .con_left_edit .bg .bg_imgs img {
	    width: 25px;
	    padding: 4px;
	    height: 25px;
	    cursor: pointer;
	}
	.wish .content .con1 .con_left_edit .signs .sign_imgs {
	    float: left;
	    width: 360px;
	}
	.wish .content .con1 .con_left_edit .signs .sign_imgs img{
		float:left;
		width:32px;
		padding:6px;
		padding-left:10px;
		padding-right:10px;
		height:32px;
		cursor:pointer;
	}
	.img1 {
	    border: 1px solid #f0faff;
	    background: none;
	}
	.img2{
		border:1px solid #fb986c;
		background:#ffffff;
	}
	.wish .content .con1 .con_right_preview {
	    float: left;
	    width: 280px;
	    padding-top: 20px;
	    text-align: center;
	}
	.wish .content .con1 .con_right_preview .tip {
	    width: 240px;
	    margin: 0 auto;
	    font-size: 12px;
	    text-align: left;
	    overflow: hidden;
	    border: 1px solid #baa7d4;
	}
	.wish .content .con1 .con_right_preview .tip .tip_title {
	    line-height: 40px;
	    width: 220px;
	    height: 40px;
	    padding-left: 10px;
	    padding-right: 10px;
	}
	.wish .content .con1 .con_right_preview .tip .tip_title .tip_num {
	    float: left;
	    width: 60px;
	}
	.wish .content .con1 .con_right_preview .tip .tip_title .tip_time {
	    float: left;
	}
	.wish .content .con1 .con_right_preview .tip .sign_name {
	    height: 32px;
	    width: 220px;
	    padding: 10px;
	}
	.wish .content .con1 .con_right_preview .tip .tip_con {
	    line-height: 20px;
	    min-height: 40px;
	    padding: 10px;
	    width: 220px;
	    word-wrap: break-word;
	    word-break: break-all;
	}
	.wish .content .con1 .con_right_preview .tip .sign_name .tip_sign {
	    float: left;
	    text-align: center;
	    height: 32px;
	    width: 50px;
	}
	.wish .content .con1 .con_right_preview .tip .sign_name .tip_name {
	    float: right;
	    text-align: right;
	    padding-right: 10px;
	    height: 32px;
	    line-height: 32px;
	}
	</style>
</head>
<body>
	<div class="head"></div>
	<div class="nav" id="nav">
		<span class="item" onclick="wishDis()" onmouseover="this.style.cursor='default';">我要许愿</span><span class="item" onmouseover="this.style.cursor='default';">找我的许愿</span>
	</div>
	<div class="wishes">
		<div class="paper" id="paper">
			<div class="head" onmousedown="Focus(paper);blockMove(paper)">
				第[13123]条 2017/11/11 19:43
			</div>
			<div class="body">
				13
			</div>
			<div class="foot">
				<div class="icon">
					<img src="images/bpic_3.gif" />
				</div>
				<div class="name">
					小明
				</div>
			</div>
		</div>

		<div class="paper" id="paper1">
			<div class="head" onmousedown="Focus(paper1);blockMove(paper1)">
				第[13123]条 2017/11/11 19:43
			</div>
			<div class="body">
				13
			</div>
			<div class="foot">
				<div class="icon">
					<img src="images/bpic_3.gif" />
				</div>
				<div class="name">
					小明
				</div>
			</div>
		</div>
		<div class="paper" id="paper2">
			<div class="head" onmousedown="Focus(paper2);blockMove(paper2)">
				第[13123]条 2017/11/11 19:43
			</div>
			<div class="body">
				13
			</div>
			<div class="foot">
				<div class="icon">
					<img src="images/bpic_3.gif" />
				</div>
				<div class="name">
					小明
				</div>
			</div>
		</div>
	</div>
	<div class="wish" id="wish" onmousedown="blockMove(this)">
		<div class="close" onclick="closeElement(this.parentNode);" onmouseover="this.style.cursor='pointer';">&#215;</div>
		<div class="content">
                	<div class="bar">我要贴祝福纸条</div>
                    <div class="con1">
                    	<div class="con_left_edit">
                        	<div class="bg">
                                <div class="tl">
                                    请选择纸条颜色：
                                </div>
                                <div class="bg_imgs">
                                    <img src="images/bg_1.gif" alt="" title="" onclick="javascript:setTagBColor('1');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bg_2.gif" alt="" title="" onclick="javascript:setTagBColor('2');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bg_3.gif" alt="" title="" onclick="javascript:setTagBColor('3');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bg_4.gif" alt="" title="" onclick="javascript:setTagBColor('4');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bg_5.gif" alt="" title="" onclick="javascript:setTagBColor('5');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bg_6.gif" alt="" title="" onclick="javascript:setTagBColor('6');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bg_7.gif" alt="" title="" onclick="javascript:setTagBColor('7');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bg_8.gif" alt="" title="" onclick="javascript:setTagBColor('8');" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                </div>
                                <div class="clr"></div>
                            </div>
                            <div class="signs">
                            	<div class="tl">
                                    请选择纸条图案：
                                </div>
                                <div class="sign_imgs">
                                    <img src="images/bpic_1.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_2.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_3.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_4.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_5.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_6.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_7.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_8.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_9.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_10.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_11.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <img src="images/bpic_12.gif" alt="" title="" onclick="javascript:setIcon(this)" class="img1" onmouseover="this.className='img2'" onmouseout="this.className='img1'">
                                    <div class="clr"></div>
                                </div>
                                <div class="clr"></div>
                            </div>
                            <div class="tl2">输入你的祝福纸条内容( 还能输入<span style="width:30px" id="freeLength">120</span>个字 )</div>
                            <div class="tip_con_edit">
                            <textarea cols="70" rows="5" style="color:#505050;font-size:12px;" onkeydown="if(this.value.length<=200){wishcontent.innerHTML=this.value;}" onkeyup="if(this.value.length<=200){wishcontent.innerHTML=this.value;}" name="messages" id="messages" placeholder="写下你的祝福。"></textarea>
                            </div>
                          <div class="tip_signname_edit">
                            您的署名：<input type="text" name="singnature" maxlength="10" value="" onkeydown="javascript:document.getElementById('name').innerHTML=this.value" onkeyup="javascript:document.getElementById('name').innerHTML=this.value" />
                            </div>
                            <div class="code">
                            	<div style="float:left">
                                	验 证 码：<input type="text" name="captcha_code" size="10" maxlength="4">
                                </div>
                            	<div id="authcode"><img src="insert.php?tag=1" onclick="refreash('authcode')" title="点击换一张"></div>
                                <div class="clr"></div>
							
                            </div>
                            <div class="submitwish">
                            <input type="image" src="images/pic_submit.gif">
                            </div>
                      </div>
                        <div class="con_right_preview">
                        纸条效果预览：
                        	<div class="tip" style="background-color:#e8deff" id="preview">
                                <div class="tip_title">
                                    <div class="tip_num">第x条</div>
                                    <div class="tip_time" id="viewtime">2017-11-17 17:13:07</div>
                                    <div class="clr"></div>
                                </div>
                                <div class="tip_con" id="wishcontent">你的祝福
                                </div>
                                <div class="sign_name">
                                    <div class="tip_sign">
                                    	<img src="images/bpic_1.gif" id="Icon" alt="" title="">
                                    </div>
                                    <div class="tip_name" id="name">你的署名</div>
                                    <div class="clr"></div>
                                </div>
                            </div>
                        </div>
                        <div class="clr"></div>
                    </div>
                </div>
	</div>
	<script>
		var doc;
		var focusNum=1;
		var timers=Array();
		var DirsX=Array(1,-1,1,-1,1,1,-1);
		var DirsY=Array(-1,1,1,-1,1,-1,-1);
		var speed=50;
		randLocation();
		var docs=document.getElementsByClassName('paper');
		for(var i=0;i<docs.length;i++){
			var modX=DirsX[i%(DirsX.length-1)];
			var modY=DirsY[i%(DirsY.length-1)];
			docs[i].timer=null;
			docs[i].DirX=modX;
			docs[i].DirY=modY;
			autoFloat(docs[i],speed);
			docs[i].onmouseover=function(){
				clearInterval(this.timer);
			}
			docs[i].onmouseout=function(){
				autoFloat(this,speed);
			}
		}
		function wishDis(){
			var containerW=window.innerWidth;
			var containerH=window.innerHeight;
			wish.style.display="inline-block";
			var blockW=wish.clientWidth;
			var blockH=wish.clientHeight;
			var x=containerW/2-blockW/2;
			var y=containerH/2-blockH/2;
			wish.style.left=x+"px";
			wish.style.top=y+"px";
		}
		function closeElement(closeDst){
			closeDst.style.display="none";
		}
		function setIcon(obj){
			Icon.src=obj.src;
		}
		function Focus(obj){
			obj.style.zIndex=focusNum++;
		}
		function randLocation(){
			var eles=document.getElementsByClassName('paper');
			var obj;
			for(var i=0;i<eles.length;i++){
				var obj=eles[i];
				var parent=obj.parentNode;
				var offsetW=parent.offsetLeft+parent.scrollWidth;
				var offsetH=parent.offsetTop+parent.scrollHeight;
				var x=Math.floor(Math.random()*offsetW);
				var y=Math.floor(Math.random()*offsetH);
				x=(x-obj.offsetWidth)>parent.offsetLeft?(x-obj.offsetWidth):parent.offsetLeft;
				y=(y-obj.offsetHeight)>parent.offsetTop?(y-obj.offsetHeight):parent.offsetTop;
				obj.style.top=y+"px";
				obj.style.left=x+"px";;
			}
		}
		function autoFloat(obj,speed){
				var parent=obj.parentNode;
				var offsetW=parent.offsetLeft+parent.clientWidth;
				var offsetH=parent.offsetTop+parent.clientHeight;
				offsetW=(offsetW-obj.offsetWidth)>parent.offsetLeft?(offsetW-obj.offsetWidth):parent.offsetLeft;
				offsetH=(offsetH-obj.offsetHeight)>parent.offsetTop?(offsetH-obj.offsetHeight):parent.offsetTop;
				if(obj.DirX==null){
					obj.DirX=1;
				}
				if(obj.DirY==null){
					obj.DirY=1;
				}
			obj.timer=setInterval(function(){
				var DirX=obj.DirX;
				var DirY=obj.DirY;
				var x=parseInt(obj.style.left);
				var y=parseInt(obj.style.top);
				if(x+DirX<offsetW&&x+DirX>parent.offsetLeft){
					obj.style.left=(x+DirX)+"px";
				}else{
					obj.DirX=-DirX;
				}
				if((y+DirY)<offsetH&&(y+DirY)>parent.offsetTop){
					obj.style.top=(y+DirY)+"px";
				}else{
					obj.DirY=-DirY;
				}
			},speed);
		}
		function blockMove(obj){
			var offsetX=obj.offsetLeft;
			var offsetY=obj.offsetTop;
			var width=(event.clientX-offsetX);
			var height=(event.clientY-offsetY);
			var pX=offsetX;
			var pY=offsetY;
			obj.style.cursor="move";
			document.onmousemove=function(){
				if(obj!=null){
					pX=event.clientX-width;
					pY=event.clientY-height;
					var offsetW=obj.parentNode.clientWidth;
					var offsetH=obj.parentNode.clientHeight;
					offsetW=(offsetW-obj.offsetWidth)>0?(offsetW-obj.offsetWidth):0;
					offsetH=(offsetH-obj.offsetHeight)>0?(offsetH-obj.offsetHeight):0;
					if(pX<=offsetW&&pX>=0){
						obj.style.left=pX+"px";
					}
					if(pY<=offsetH&&pY>=0){
						obj.style.top=pY+"px";
					}
				}
			}
			document.onmouseup=function(){
				obj.style.cursor="default";
				obj=null;
			}
		}
	</script>
</body>
</html>